<template>
  <div class="stock-table" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
    <transition-group name="fade" tag="div">

      <div class="stock-row" v-for="(stock) in currentPageStocks" :key="stock.name">
        <div class="stock-item">
          <div class="stock-name">{{ stock.name }}</div>
          <div class="stock-price">{{ formatPrice(stock.price) }}</div>
        </div>
      </div>
    </transition-group>

    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">
        &lt;
      </button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">
        &gt;
      </button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 6,
      intervalId: null,
      stocks: [],

      scrollIntervalId: null,
      fetchIntervalId: null,
      isMouseInside: false,
      lastMouseMoveTime: null,
      mouseInactiveTimeout: 5000, // 鼠标不活动超过10秒后开始自动滚动
      fetchInterval: 10000, // 10秒钟刷新一次数据
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.stocks.length / this.pageSize);
    },
    currentPageStocks() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.stocks.slice(startIndex, endIndex);
    },
  },
  methods: {
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      } else {
        this.currentPage = 1; // 循环到第一页
      }
    },
    autoScroll() {
      this.scrollIntervalId = setInterval(() => {
        if (!this.isMouseInside || (new Date().getTime() - this.lastMouseMoveTime > this.mouseInactiveTimeout)) {
          this.nextPage();
        }
      }, 5000);
    },
    stopAutoScroll() {
      clearInterval(this.scrollIntervalId);
      this.scrollIntervalId = null;
    },

    autoFetchStocks() {
      this.fetchIntervalId = setInterval(() => {
        if (!this.isMouseInside || (new Date().getTime() - this.lastMouseMoveTime > this.mouseInactiveTimeout)) {
          this.fetchStocks();
        }
      }, this.fetchInterval);
    },
    stopAutoFetchStocks() {
      clearInterval(this.fetchIntervalId);
      this.fetchIntervalId = null;
    },
    handleMouseMove() {
      this.isMouseInside = true;
      this.updateLastMouseMoveTime();
    },
    handleMouseLeave() {
      this.isMouseInside = false;
      this.updateLastMouseMoveTime();
    },
    updateLastMouseMoveTime() {
      this.lastMouseMoveTime = new Date().getTime();
    },
    fetchStocks() {
      axios.get('/chinaIndex/findAll').then((response) => {
        this.stocks = response.data.data;
      }).catch((error) => {
        console.error('Error', error);
      });
    },

  },
  mounted() {
    this.autoScroll();
    this.fetchStocks();
  },
  beforeUnmount() {
    clearInterval(this.intervalId);
  },
};
</script>

<style scoped>
.stock-table {
  color: #f0f0f0;
  font-size: 14px;
  width: 96%;
  height: 100%;
  height: 295px;
  /* 很重要的高度 */
  margin: 0 auto;
  overflow: hidden;
}

.stock-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  height: 100%;
}

.stock-item {
  background-color: #06245e;
  width: 100%;
  display: flex;
  padding: 9px;
  justify-content: space-between;
  border-top: solid 6px #05174d;
}

.stock-name {
  color: #f8f6f6f3;
  margin-left: 4px;
}

.stock-price {
  color: #add8e6;
}

.pagination {
  position: absolute;
  bottom: 1px;
  left: 38%;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.pagination button {
  background-color: #3f88e7;
  color: #f0f0f0;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination span {
  margin: 0 12px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
